"use strict";

var container       = document.querySelector('.loadcontainer');
var section         = document.querySelector('.loadsection');
var canvas          = section.querySelector('canvas');
var processPassed   = container.querySelector('.loadprocess-passed');
var shade           = container.querySelector('.shade');

var progress   = 0;
var maxProcess = 101;
var step       = 0.2;
var stoped     = false;

window.onload=function () {
    autoPlay();
};
waveLoading.init({
    showText: false,
    callback: function () {
        // alert('进度条加载完成');
        stoped = true;
        addClass(shade, 'hide');
    }
});

waveLoading.draw();

function autoPlay() {
    if (stoped) {
        waveLoading.draw();
        stoped = false;
    }
    // 遮罩层，防止自动演示期间的用户操作
    removeClass(shade, 'hide');

    (function loading() {
        waveLoading.setProgress(progress);
        progress += step;
        $('#loadpercent').html((progress > 100 ? 100 : progress).toFixed(1) + '%');
        // console.log(progress.toFixed(1) + '%');
        processPassed.style.width = (progress > 100 ? 100 : progress) * 2 + 'px';
        if (progress <= maxProcess) {
            requestAnimationFrame(loading);
        } else {
            progress = 0;
        }
    })();
}
/**
 * 获取给定元素相对于窗口的距离
 * @param {HTMLElement} element
 * @returns {{x: number, y: number}}
 */

function removeClass(el, className) {
    if (el.classList)
        el.classList.remove(className);
    else
        el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

function addClass(el, className) {
    if (el.classList)
        el.classList.add(className);
    else
        el.className += ' ' + className;
}
